{% extends "base.html" %}

{% block title %}系统设置 - AI文本生成系统{% endblock %}

{% block content %}
<div class="flex-1 p-6 overflow-y-auto">
    <div class="max-w-2xl mx-auto">
        <h2 class="text-2xl font-bold mb-6 flex items-center">
            <i class="fas fa-cog mr-3 text-blue-400"></i>系统设置
        </h2>
        
        <div class="bg-gray-800 rounded-lg p-6 mb-6">
            <h3 class="text-lg font-semibold mb-4 border-b border-gray-700 pb-2">API设置</h3>
            
            <form id="settings-form">
                <div class="mb-4">
                    <label class="block text-sm font-medium mb-2" for="api-key">DeepSeek API密钥</label>
                    <input 
                        type="password" 
                        id="api-key" 
                        class="w-full bg-gray-700 border border-gray-600 rounded p-2 outline-none focus:border-blue-500"
                        placeholder="输入您的DeepSeek API密钥"
                    >
                    <p class="text-xs text-gray-400 mt-1">您的API密钥将安全地存储在本地</p>
                </div>
                
                <div class="mb-4">
                    <label class="block text-sm font-medium mb-2" for="model">模型</label>
                    <select 
                        id="model" 
                        class="w-full bg-gray-700 border border-gray-600 rounded p-2 outline-none focus:border-blue-500"
                    >
                        <option value="deepseek-chat">deepseek-chat</option>
                        <option value="deepseek-coder">deepseek-coder</option>
                    </select>
                </div>
                
                <div class="grid grid-cols-2 gap-4 mb-6">
                    <div>
                        <label class="block text-sm font-medium mb-2" for="temperature">温度 (0-1)</label>
                        <input 
                            type="number" 
                            id="temperature" 
                            min="0" 
                            max="1" 
                            step="0.1"
                            class="w-full bg-gray-700 border border-gray-600 rounded p-2 outline-none focus:border-blue-500"
                        >
                    </div>
                    
                    <div>
                        <label class="block text-sm font-medium mb-2" for="max-tokens">最大生成长度</label>
                        <input 
                            type="number" 
                            id="max-tokens" 
                            min="1" 
                            max="4096"
                            class="w-full bg-gray-700 border border-gray-600 rounded p-2 outline-none focus:border-blue-500"
                        >
                    </div>
                </div>
                
                <div class="flex justify-end">
                    <button 
                        type="submit" 
                        class="bg-blue-600 hover:bg-blue-700 text-white py-2 px-6 rounded flex items-center"
                    >
                        <i class="fas fa-save mr-2"></i>保存设置
                    </button>
                </div>
            </form>
        </div>
        
        <div class="bg-gray-800 rounded-lg p-6">
            <h3 class="text-lg font-semibold mb-4 border-b border-gray-700 pb-2">系统信息</h3>
            
            <div class="space-y-2 text-sm">
                <div class="flex justify-between">
                    <span class="text-gray-400">版本</span>
                    <span>1.0.0</span>
                </div>
                <div class="flex justify-between">
                    <span class="text-gray-400">开发者</span>
                    <span>AI文本生成系统团队</span>
                </div>
                <div class="flex justify-between">
                    <span class="text-gray-400">技术支持</span>
                    <span>support@aitextgen.com</span>
                </div>
            </div>
        </div>
    </div>
</div>
{% endblock %}

{% block scripts %}
<script src="{{ url_for('static', filename='js/app.js') }}"></script>
<script>
    document.addEventListener('DOMContentLoaded', function() {
        // 加载当前设置
        fetch('/api/settings')
            .then(response => response.json())
            .then(settings => {
                document.getElementById('api-key').value = settings.DEEPSEEK_API_KEY;
                document.getElementById('model').value = settings.DEEPSEEK_MODEL;
                document.getElementById('temperature').value = settings.DEEPSEEK_TEMPERATURE;
                document.getElementById('max-tokens').value = settings.DEEPSEEK_MAX_TOKENS;
            });
        
        // 保存设置
        document.getElementById('settings-form').addEventListener('submit', function(e) {
            e.preventDefault();
            
            const settings = {
                DEEPSEEK_API_KEY: document.getElementById('api-key').value,
                DEEPSEEK_MODEL: document.getElementById('model').value,
                DEEPSEEK_TEMPERATURE: document.getElementById('temperature').value,
                DEEPSEEK_MAX_TOKENS: document.getElementById('max-tokens').value
            };
            
            fetch('/api/settings', {
                method: 'POST',
                headers: {
                    'Content-Type': 'application/json'
                },
                body: JSON.stringify(settings)
            })
            .then(response => response.json())
            .then(data => {
                if (data.success) {
                    alert('设置已保存成功！');
                } else {
                    alert('保存设置时出错');
                }
            })
            .catch(error => {
                console.error('Error:', error);
                alert('保存设置时出错');
            });
        });
    });
</script>
{% endblock %}